<script>
    import { findHistoryList } from '@/api/measurDevice'
    import SearchContionHis from './SearchContionHis.vue'
    import { transformTableData } from '@/utils'
    import HeaderActionHis from './HeaderActionHis'

    export default {
        name: 'HistoryList',
        props: {
            title: String,
            rowData: Object,
        },
        components: {
            SearchContionHis,
            HeaderActionHis,
        },
        data() {
            return {
                params: {
                    // meterId: this.$props.rowData.id,
                    // projectId: this.$store.state.projectId,
                },
                name: this.$props.rowData.name,
                tableHeader: [],
            }
        },
        created() {
            this.initSetModal()
        },
        watch: {
            tableHeader() {
                this.$nextTick(() => {
                    this.$refs.riTableHis.$refs.eltableRef.doLayout()
                })
            },
        },

        methods: {
            initSetModal() {
                if (this.$props.rowData) {
                    this.$emit('SetTitle', '历史数据')
                }
                this.$emit('SetPageWidth', 1300)
                this.$emit('SetPageActions', [
                    {
                        text: '返回',
                        theme: 'default',
                        handle: () => {
                            this.$emit('Close')
                        },
                    },
                ])
            },
            loadTbaleData({ resolve, params }) {
                const { condition } = params
                params.condition.startTime = condition.date + ' ' + condition.time[0]
                params.condition.endTime = condition.date + ' ' + condition.time[1]
                ;(params.condition.meterId = this.$props.rowData.id),
                    (params.condition.projectId = this.$store.state.projectId),
                    (this.params = params)
                findHistoryList(params)
                    .then((res) => {
                        if (res.code === 200) {
                            const { head, data: tableData } = transformTableData(
                                res.data.records || []
                            )
                            this.tableHeader = head
                            // const resData = res.data || {}

                            resolve({
                                records: tableData || [],
                                total: Number(res.data.total),
                            })
                        } else {
                            resolve({
                                records: [],
                                total: 0,
                            })
                        }
                    })
                    .catch((res) => {
                        resolve({
                            records: [],
                            total: 0,
                        })
                    })
            },
            setColumnWidth(item) {
                const widths = {
                    时间: 150,
                }
                return widths[item] || 'auto'
            },
            setColumnFixed(item) {
                const widths = {
                    时间: 'left',
                }
                return widths[item] || false
            },
        },
    }
</script>
<template>
    <div class="contant">
        <p style="margin-bottom: 10px">
            <span>计量器具名称:{{ this.name }}</span>
        </p>

        <div class="rlTable">
            <RlTable
                :is-pagination="true"
                @on-change="loadTbaleData"
                :initData="false"
                ref="riTableHis"
                :search="true"
                :isShowRest="false"
                :isShowMore="false"
                :pageSize="10"
                :pageSizes="[10, 100, 500, 1440]"
            >
                <template #default>
                    <el-table-column
                        v-for="(item, index) in tableHeader"
                        :key="index"
                        :label="item"
                        :prop="item"
                        :width="setColumnWidth(item)"
                        :fixed="setColumnFixed(item)"
                    ></el-table-column>
                </template>
                <template #search>
                    <SearchContionHis> </SearchContionHis>
                </template>

                <template #head-left-button>
                    <HeaderActionHis :params="params" :name="name" />
                </template>
            </RlTable>
        </div>
    </div>
</template>
<style lang="scss" scoped>
    .contant {
        height: 65vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .conataner-resize {
        position: relative;
    }
    .rlTable {
        height: 95%;
        width: 1250px;
        // position: relative;
        ::v-deep .rltable {
            padding: 0;
            background: none;
        }
        ::v-deep .table-search {
            padding: 10px 24px 10px;
        }
    }
    ::v-deep .el-loading-mask {
        background: transparent !important;
    }
    // ::v-deep .el-date-editor.el-input,
    // .el-date-editor.el-input__inner {
    //     width: 140px;
    // }
    ::v-deep .el-form-item {
        width: 400px;
    }
</style>
